<template>
  <div class="employees-container agentWork">
    <div class="app-container boc_flex">
      <transition name="el-fade-in-linear">
        <el-row v-if="showCz == false">
          <el-col :span="24">
            <div class="grid-content bg-purple-dark">
              <el-row>
                <el-col :span="24"
                  ><div class="grid-content bg-purple-dark">
                    <el-card class="box-card" style="height: 120px">
                      <el-row>
                        <el-col :span="24"
                          ><div
                            class="grid-content bg-purple grid-flex"
                            style="height: 80px"
                          >
                            <div class="nav_box_left"><h2>工单统计</h2></div>
                            <div class="nav_box_right">
                              <el-input
                                v-model="inputVal"
                                placeholder="工单名称/工单编号"
                              ></el-input
                              ><el-button type="primary">搜索</el-button>
                              <el-button type="primary">导出</el-button>
                              <el-button type="primary">导入</el-button>
                              <div
                                class="plsc"
                                style="
                                  display: flex;
                                  width: 285px;
                                  margin-left: 10px;
                                "
                              >
                                <el-button
                                  type="primary"
                                  @click="showSelection = !showSelection"
                                  >批量操作</el-button
                                >
                                <el-button
                                  type="warning"
                                  size="mini"
                                  v-show="showSelection"
                                  @click="dataClose"
                                  >关闭</el-button
                                >
                                <el-button
                                  type="danger"
                                  size="mini"
                                  v-show="showSelection"
                                  @click="dataClear"
                                  >删除</el-button
                                >
                              </div>
                            </div>
                          </div></el-col
                        >
                      </el-row>
                    </el-card>
                  </div></el-col
                >
              </el-row>
              <div style="margin-top: 10px"></div>

              <el-row>
                <el-col :span="24"
                  ><div class="grid-content bg-purple-dark">
                    <el-card class="box-card" style="height: 760px">
                      <el-table
                        :header-row-style="{ height: '30px' }"
                        :data="tableData"
                        style="width: 100%"
                        height="71vh"
                        border
                         @selection-change="handleSelectionChange"
                      >
                        <el-table-column
                          type="selection"
                          width="55"
                          v-if="showSelection"
                        >
                        </el-table-column>
                        <el-table-column
                          label="工单编号"
                          width="60"
                          align="center"
                        >
                        </el-table-column>
                        <el-table-column
                          prop=""
                          label="工单标题"
                          width="100"
                          align="center"
                        >
                        </el-table-column>
                        <el-table-column
                          prop="date"
                          label="开始"
                          width="130"
                          align="center"
                        >
                        </el-table-column>
                        <el-table-column
                          prop="date"
                          label="结束"
                          width="130"
                          align="center"
                        >
                        </el-table-column>
                        <el-table-column
                          prop="name"
                          label="持续时间"
                          width="80"
                          align="center"
                        >
                        </el-table-column>

                        <el-table-column
                          prop="name"
                          label="当前状态"
                          width="80"
                          align="center"
                        >
                        </el-table-column>
                        <el-table-column
                          prop="name"
                          label="工单模板"
                          width="80"
                          align="center"
                        >
                        </el-table-column>
                        <el-table-column
                          label="2023年1月份"
                          align="center"
                          width="700"
                        >
                          <el-steps
                            :space="200"
                            :active="1"
                            finish-status="success"
                          >
                            <el-step title="已下发"></el-step>
                            <el-step title="确认中"></el-step>
                            <el-step title="处理中"></el-step>
                            <el-step title="...."></el-step>
                          </el-steps>
                        </el-table-column>
                        <el-table-column label="操作" align="center">
                          <template slot-scope="scope">
                            <el-button
                              size="mini"
                              @click="XDbtn(scope.$index, scope.row)"
                              v-if="scope.row.name == '草稿'"
                              >下单</el-button
                            >
                            <el-button
                              size="mini"
                              @click="XGbtn(scope.$index, scope.row)"
                              v-if="scope.row.name == '草稿'"
                              >修改</el-button
                            >
                            <el-button
                              size="mini"
                              @click="XGbtn(scope.$index, scope.row)"
                              v-if="
                                scope.row.name == '待确认' ||
                                scope.row.name == '处理中' ||
                                scope.row.name == '待审核'
                              "
                              >催单</el-button
                            >
                            <el-button
                              size="mini"
                              type="warning"
                              @click="XGbtn(scope.$index, scope.row)"
                              v-if="
                                scope.row.name == '待确认' ||
                                scope.row.name == '处理中'
                              "
                              >关闭</el-button
                            >
                            <el-button
                              size="mini"
                              @click="XGbtn(scope.$index, scope.row)"
                              v-if="scope.row.name == '待审核'"
                              >审核</el-button
                            >

                            <el-button
                              size="mini"
                              type="danger"
                              @click="SCbtn(scope.$index, scope.row)"
                              >删除</el-button
                            >
                          </template>
                        </el-table-column>
                      </el-table>
                      <div
                        style="
                          width: 100%;
                          text-align: center;
                          padding-top: 18px;
                        "
                      >
                        <el-pagination
                          @size-change="handleSizeChange"
                          @current-change="handleCurrentChange"
                          :current-page.sync="currentPage3"
                          :page-size="100"
                          layout="prev, pager, next, jumper"
                          :total="1000"
                        />
                      </div>
                    </el-card></div
                ></el-col>
              </el-row></div
          ></el-col>
        </el-row>
      </transition>
      <transition name="el-fade-in">
        <DialogCmp
          v-if="showCz"
          @showDialog="showCz = false"
          :itemNum="itemNum"
        />
      </transition>
    </div>
  </div>
</template>

<script>
import DialogCmp from "@/components/DialogCmp";

// 代办工单
export default {
  name: "agentWork",

  data() {
    return {
      showSelection: false,
      list: ["未确认", "处理中", "审核中", "等待关闭"],
      tableData: [
        {
          date: "2016-05-02",
          name: "草稿",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "待确认",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-03",
          name: "处理中",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "待审核",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "已关闭",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-02",
          name: "草稿",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "待确认",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-03",
          name: "处理中",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "待审核",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "已关闭",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      listUnmber: [
        "1",
        "2",
        "3",
        "4",
        " 5",
        "6",
        "7",
        "8",
        "9",
        "10",
        "11",
        "12",
        "13",
        "14",
        "15",
      ],
      showCz: false, //详情弹窗
      percentage: 20, //进度
      customColor: [
        { color: "#f56c6c", percentage: 20 },
        { color: "#e6a23c", percentage: 40 },
        { color: "#5cb87a", percentage: 60 },
        { color: "#1989fa", percentage: 80 },
        { color: "#6f7ad3", percentage: 100 },
      ], //进度条颜色
      // fromBtn: "确认",
      itemNum: "",
      currentPage3: 5,
      inputVal: "",
      multipleSelection :[],//批量拿到的数据
    };
  },
  components: {
    DialogCmp,
  },

  mounted() {},

  methods: {
    // 格式化table 内容
    formatter(row, column) {
      // return row.address;
    },
    // // 确认
    // enterBtn(scope, row) {
    //   console.log(row);
    // },
    // // 详情
    // detailBtn(index, row) {

    // },
    // // 回单
    // goBtn(index, row) {
    //   this.showCz = true;
    //   this.itemNum = 2;
    //   console.log(index, row);
    // },
    // 触发筛选
    changeBtnValue(val) {
      console.log(val, "ccccccccccccc");
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    // 批量删除
    dataClear() {},
    // 批量关闭
    dataClose() {},
    // 批量拿数据
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
    // // 详情
    // XQbtn(index, row) {
    //   console.log(row.name, "name");
    //   this.itemNum = row.name;

    //   this.showCz = true;
    // },
    // // 关闭
    GBbtn(index, row) {},
    // 下发
  },
};
</script>

<style lang="scss" scoped>
.boc_flex {
  // 原本高度是动态计算出来的 给死值是为了动画过渡的时候不显示滚动条
  height: 911px !important;

  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.grid-flex {
  display: flex;
  align-items: center;
  .nav_box_left {
    margin-right: 830px;
  }
  .nav_box_right {
    display: flex;
    width: 720px;
    .el-input {
      width: 200px;
    }
    .el-input__inner{
          border: 1px solid #409EFF;
    }
  }
}
.actived {
  background-color: red;
}

::v-deep .app-container {
  padding: 10px !important;
}
//  ::v-deep .el-card__body {
//   text-align: center;
// }
</style>
